import React from 'react';
import { ChevronRightIcon } from 'lucide-react';
export const BabyPage = () => {
  const categories = [{
    id: 'play-development',
    title: 'Play & Development',
    image: 'https://images.unsplash.com/photo-1596240898484-250d47f8e9d9?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=1000&q=80',
    description: 'Toys, activity centers, and developmental tools'
  }, {
    id: 'solid-foods',
    title: 'Solid Foods',
    image: 'https://images.unsplash.com/photo-1596443686812-2f45229eebc3?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=1000&q=80',
    description: 'High chairs, feeding tools, and first food essentials'
  }, {
    id: 'mobility',
    title: 'Mobility',
    image: 'https://images.unsplash.com/photo-1566004100631-35d015d6a491?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=1000&q=80',
    description: 'Walkers, bouncers, and crawling support items'
  }, {
    id: 'sleep',
    title: 'Sleep',
    image: 'https://images.unsplash.com/photo-1594829978705-aa0a97f5a0dc?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=1000&q=80',
    description: 'Sleep training tools and bedtime essentials'
  }];
  const featuredProducts = [{
    id: 'b1',
    name: 'Activity Play Gym',
    image: 'https://images.unsplash.com/photo-1596240898484-250d47f8e9d9?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=600&q=80',
    price: '$79.99',
    rating: 4.8,
    reviewCount: 245
  }, {
    id: 'b2',
    name: 'Silicone Feeding Set',
    image: 'https://images.unsplash.com/photo-1596443686812-2f45229eebc3?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=600&q=80',
    price: '$29.99',
    rating: 4.7,
    reviewCount: 189
  }, {
    id: 'b3',
    name: 'Baby Walker',
    image: 'https://images.unsplash.com/photo-1566004100631-35d015d6a491?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=600&q=80',
    price: '$69.99',
    rating: 4.5,
    reviewCount: 167
  }, {
    id: 'b4',
    name: 'Sensory Toys Set',
    image: 'https://images.unsplash.com/photo-1515488042361-ee00e0ddd4e4?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=600&q=80',
    price: '$39.99',
    rating: 4.9,
    reviewCount: 203
  }];
  const milestones = [{
    age: '4-5 months',
    developments: ['Rolling over', 'Improved head control', 'Reaching for objects'],
    recommendedProducts: ['Activity mats', 'Tummy time supports', 'Soft rattles']
  }, {
    age: '6-7 months',
    developments: ['Sitting up', 'Starting solids', 'Teething begins'],
    recommendedProducts: ['High chairs', 'Teething toys', 'First food supplies']
  }, {
    age: '8-10 months',
    developments: ['Crawling', 'Pulling to stand', 'Pincer grasp'],
    recommendedProducts: ['Baby gates', 'Push toys', 'Finger foods tools']
  }, {
    age: '11-12 months',
    developments: ['First steps', 'First words', 'Self-feeding attempts'],
    recommendedProducts: ['Walking aids', 'Simple puzzles', 'Stacking toys']
  }];
  return <div className="w-full">
      {/* Hero Section */}
      <div className="bg-cream py-12 md:py-16">
        <div className="container mx-auto px-4 md:px-6">
          <div className="max-w-3xl">
            <h1 className="font-nunito font-bold text-3xl md:text-4xl text-dark mb-4">
              Baby Essentials (4-12 Months)
            </h1>
            <p className="font-inter text-gray-600 text-lg mb-6">
              Support your baby's rapid growth and development with products
              designed for their changing needs.
            </p>
            <div className="flex flex-wrap gap-3">
              <a href="#play-development" className="bg-terracotta text-white px-4 py-2 rounded-md hover:bg-terracotta/90 transition-colors text-sm font-medium">
                Play & Development
              </a>
              <a href="#solid-foods" className="bg-white text-dark px-4 py-2 rounded-md hover:bg-gray-100 transition-colors text-sm font-medium border border-gray-200">
                Solid Foods
              </a>
              <a href="#mobility" className="bg-white text-dark px-4 py-2 rounded-md hover:bg-gray-100 transition-colors text-sm font-medium border border-gray-200">
                Mobility
              </a>
              <a href="#sleep" className="bg-white text-dark px-4 py-2 rounded-md hover:bg-gray-100 transition-colors text-sm font-medium border border-gray-200">
                Sleep
              </a>
            </div>
          </div>
        </div>
      </div>
      {/* Main Content */}
      <div className="container mx-auto px-4 md:px-6 py-12">
        {/* Categories */}
        <section className="mb-16">
          <h2 className="font-nunito font-semibold text-2xl md:text-3xl text-dark mb-8">
            Shop By Category
          </h2>
          <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-6">
            {categories.map(category => <a key={category.id} href={`/baby/${category.id}`} className="group block rounded-lg overflow-hidden shadow-sm hover:shadow-md transition-shadow">
                <div className="aspect-[4/3] w-full">
                  <img src={category.image} alt={category.title} className="w-full h-full object-cover group-hover:scale-105 transition-transform duration-300" />
                </div>
                <div className="p-4 bg-white">
                  <h3 className="font-nunito font-semibold text-lg mb-1">
                    {category.title}
                  </h3>
                  <p className="text-sm text-gray-600 mb-2">
                    {category.description}
                  </p>
                  <div className="flex items-center text-terracotta text-sm font-medium">
                    <span>View products</span>
                    <ChevronRightIcon size={16} className="ml-1" />
                  </div>
                </div>
              </a>)}
          </div>
        </section>
        {/* Featured Products */}
        <section className="mb-16">
          <div className="flex justify-between items-center mb-8">
            <h2 className="font-nunito font-semibold text-2xl md:text-3xl text-dark">
              Parent Favorites
            </h2>
            <a href="/baby/all-products" className="text-terracotta hover:text-terracotta/80 flex items-center text-sm font-medium">
              View all
              <ChevronRightIcon size={16} className="ml-1" />
            </a>
          </div>
          <div className="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-4 gap-6">
            {featuredProducts.map(product => <a key={product.id} href={`/product/${product.id}`} className="group block rounded-lg overflow-hidden shadow-sm hover:shadow-md transition-shadow bg-white">
                <div className="aspect-square w-full">
                  <img src={product.image} alt={product.name} className="w-full h-full object-cover group-hover:scale-105 transition-transform duration-300" />
                </div>
                <div className="p-4">
                  <h3 className="font-nunito font-semibold text-lg mb-1">
                    {product.name}
                  </h3>
                  <div className="flex items-center mb-2">
                    <div className="flex text-yellow">
                      {[...Array(5)].map((_, i) => <svg key={i} className={`w-4 h-4 ${i < Math.floor(product.rating) ? 'text-yellow fill-current' : 'text-gray-300 fill-current'}`} xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24">
                          <path d="M12 17.27L18.18 21l-1.64-7.03L22 9.24l-7.19-.61L12 2 9.19 8.63 2 9.24l5.46 4.73L5.82 21z" />
                        </svg>)}
                    </div>
                    <span className="text-xs text-gray-500 ml-1">
                      ({product.reviewCount})
                    </span>
                  </div>
                  <p className="font-medium text-terracotta">{product.price}</p>
                </div>
              </a>)}
          </div>
        </section>
        {/* Milestones Section */}
        <section>
          <h2 className="font-nunito font-semibold text-2xl md:text-3xl text-dark mb-8">
            Baby Milestones & Recommended Products
          </h2>
          <div className="overflow-x-auto">
            <table className="w-full border-collapse bg-white rounded-lg overflow-hidden shadow-sm">
              <thead>
                <tr>
                  <th className="px-6 py-4 bg-cream text-left text-dark font-semibold">
                    Age
                  </th>
                  <th className="px-6 py-4 bg-cream text-left text-dark font-semibold">
                    Key Developments
                  </th>
                  <th className="px-6 py-4 bg-cream text-left text-dark font-semibold">
                    Recommended Products
                  </th>
                </tr>
              </thead>
              <tbody>
                {milestones.map((milestone, index) => <tr key={index} className="border-t border-gray-200">
                    <td className="px-6 py-4 font-medium">{milestone.age}</td>
                    <td className="px-6 py-4">
                      <ul className="list-disc pl-5 space-y-1">
                        {milestone.developments.map((dev, i) => <li key={i} className="text-sm text-gray-600">
                            {dev}
                          </li>)}
                      </ul>
                    </td>
                    <td className="px-6 py-4">
                      <ul className="list-disc pl-5 space-y-1">
                        {milestone.recommendedProducts.map((prod, i) => <li key={i} className="text-sm text-gray-600">
                            {prod}
                          </li>)}
                      </ul>
                    </td>
                  </tr>)}
              </tbody>
            </table>
          </div>
        </section>
      </div>
    </div>;
};